<template>
  <div class="archive-confidentiality-adjustment-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>档案密级调整申请</span>
      </div>
      
      <!-- 搜索区域 -->
      <div class="search-section">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="搜索">
            <el-input
              v-model="searchForm.search"
              placeholder="输入标题、类型或内容关键词"
              clearable
              @keyup.enter.native="handleSearch"
              style="width: 300px;">
              <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区域 -->
      <el-table :data="archives" style="width: 100%" v-loading="loading">
        <el-table-column prop="archiveId" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="档案标题"></el-table-column>
        <el-table-column prop="archiveType" label="档案类型" width="120" :formatter="archiveTypeFormatter"></el-table-column>
        <el-table-column prop="securityLevel" label="保密等级" width="120" :formatter="securityLevelFormatter"></el-table-column>
        <el-table-column prop="visibleScope" label="可见范围"></el-table-column>
        <el-table-column prop="status" label="状态" width="100"></el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button size="mini" @click="viewArchiveDetails(scope.row)">查看详情</el-button>
            <el-button size="mini" type="primary" @click="handleAdjustmentRequest(scope.row)">申请调整</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalArchives"
        style="margin-top: 20px;">
      </el-pagination>
    </el-card>

    <!-- 档案详情对话框 -->
    <el-dialog title="档案详情" :visible.sync="detailDialogVisible" width="60%">
      <div v-if="currentArchive">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="档案ID">{{ currentArchive.archiveId }}</el-descriptions-item>
          <el-descriptions-item label="档案标题">{{ currentArchive.title }}</el-descriptions-item>
          <el-descriptions-item label="档案类型">{{ currentArchive.archiveType }}</el-descriptions-item>
          <el-descriptions-item label="保密等级">{{ currentArchive.securityLevel }}</el-descriptions-item>
          <el-descriptions-item label="物理位置">{{ currentArchive.physicalLocation || '无' }}</el-descriptions-item>
          <el-descriptions-item label="可见范围">{{ currentArchive.visibleScope }}</el-descriptions-item>
          <el-descriptions-item label="接收时间">{{ currentArchive.receiptTime }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ currentArchive.status }}</el-descriptions-item>
          <el-descriptions-item label="自动分类">{{ currentArchive.autoCategory || '无' }}</el-descriptions-item>
          <el-descriptions-item label="自动标签">{{ currentArchive.autoTags || '无' }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ currentArchive.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ currentArchive.updatedAt }}</el-descriptions-item>
        </el-descriptions>
        
        <!-- 文档内容展示 -->
        <div class="ocr-content-section" v-if="currentArchive.ocrContent">
          <h4>文档内容</h4>
          <el-input
            type="textarea"
            :rows="8"
            v-model="currentArchive.ocrContent"
            :readonly="true"
            placeholder="无文档内容">
          </el-input>
        </div>
        <div class="ocr-content-section" v-else>
          <h4>文档内容</h4>
          <el-alert
            title="该档案没有文档内容"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleAdjustmentRequest(currentArchive)">申请调整密级</el-button>
      </span>
    </el-dialog>

    <!-- 密级调整申请对话框 -->
    <el-dialog title="提交档案密级调整申请" :visible.sync="adjustmentDialogVisible" width="50%">
      <el-form :model="requestForm" ref="requestForm" label-width="120px" :rules="rules">
        <el-form-item label="档案标题">
          <el-input v-model="selectedArchive.title" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="当前密级">
          <el-input v-model="selectedArchive.securityLevel" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="新密级" prop="requestedValue">
          <el-select v-model="requestForm.requestedValue" placeholder="请选择新的保密等级">
            <el-option label="绝密" value="绝密"></el-option>
            <el-option label="机密" value="机密"></el-option>
            <el-option label="秘密" value="秘密"></el-option>
            <el-option label="内部" value="内部"></el-option>
            <el-option label="公开" value="公开"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请理由" prop="notes">
          <el-input type="textarea" v-model="requestForm.notes" placeholder="请输入申请理由"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adjustmentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdjustmentRequest">提交申请</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request';

export default {
  name: 'ArchiveConfidentialityAdjustment',
  data() {
    return {
      archives: [],
      currentPage: 1,
      pageSize: 10,
      totalArchives: 0,
      loading: false,
      detailDialogVisible: false,
      adjustmentDialogVisible: false,
      currentArchive: null,
      selectedArchive: {},
      searchForm: {
        search: ''
      },
      requestForm: {
        archiveId: null,
        requestType: 'confidentiality_level_adjustment',
        requestedValue: '',
        notes: ''
      },
      rules: {
        requestedValue: [{ required: true, message: '请选择新的密级', trigger: 'change' }],
        notes: [{ required: true, message: '请输入申请理由', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.fetchArchives();
  },
  methods: {
    archiveTypeFormatter(row, column, cellValue) {
      const typeMap = {
        'Document': '文件',
        'Image': '图片',
        'Audio': '音频',
        'Video': '视频',
        'Other': '其他'
      };
      return typeMap[cellValue] || cellValue;
    },
    securityLevelFormatter(row, column, cellValue) {
      const levelMap = {
        'Confidential': '机密',
        'Secret': '秘密',
        'Internal': '内部',
        'Public': '公开'
      };
      return levelMap[cellValue] || cellValue;
    },
    fetchArchives() {
      this.loading = true;
      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        search: this.searchForm.search
      };
      
      service.get('/archive/list', { params })
        .then(res => {
          if (res.data.code === 200) {
            this.archives = res.data.data.records;
            this.totalArchives = res.data.data.total;
          } else {
            this.$message.error(res.data.message || '获取档案列表失败');
          }
        })
        .catch(error => {
          console.error("Error fetching archives:", error);
          this.$message.error('获取档案列表失败');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    viewArchiveDetails(archive) {
      this.currentArchive = { ...archive };
      this.detailDialogVisible = true;
    },
    handleAdjustmentRequest(archive) {
      this.selectedArchive = { ...archive };
      this.requestForm.archiveId = archive.archiveId;
      this.requestForm.requestedValue = '';
      this.requestForm.notes = '';
      this.adjustmentDialogVisible = true;
    },
    submitAdjustmentRequest() {
      this.$refs.requestForm.validate((valid) => {
        if (valid) {
          service.post('/archive-approval/submit', this.requestForm)
            .then(res => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message || '申请提交成功');
                this.adjustmentDialogVisible = false;
              } else {
                this.$message.error(res.data.message || '申请提交失败');
              }
            })
            .catch(error => {
              console.error("Error submitting request:", error);
              this.$message.error('申请提交失败');
            });
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.fetchArchives();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchArchives();
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchArchives();
    },
    handleReset() {
      this.searchForm.search = '';
      this.currentPage = 1;
      this.fetchArchives();
    }
  }
}
</script>

<style scoped>
.archive-confidentiality-adjustment-container {
  padding: 20px;
}

.search-section {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.search-form {
  margin-bottom: 0;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.search-form .el-form-item__label {
  font-weight: 500;
  color: #606266;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.box-card .el-card__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: none;
}

.box-card .el-card__header .clearfix span {
  font-size: 16px;
  font-weight: 500;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background-color: #fafafa;
  color: #606266;
  font-weight: 500;
}

.el-pagination {
  text-align: center;
}

.ocr-content-section {
  margin-top: 20px;
}

.ocr-content-section h4 {
  margin-bottom: 10px;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    display: block;
  }
  
  .search-form .el-form-item {
    display: block;
    margin-bottom: 10px;
  }
  
  .search-form .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style> 